* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    background: #ffffff;
    border-radius: 7px;
}
.header {
    padding: 20px 40px;
}
.header:first-child {
    font-size: 18px;
    font-weight: 700;
}
#enter {
    display: none;
    border: 10px;
    overflow: hidden;
    height: 120px;
}
.inputBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    box-shadow: 1px 1px 5px #c3c3c3;
    border-radius: 10px;
}
#enter input {
    width: 400px;
    padding: 18px 20px;
    background: #f4f4f4;
    outline: none;
    position: relative;
    border-radius: 10px 0 0 10px;
    font-size: 18px;
    border: 2px solid transparent;
    transition: 250ms linear border;
}
#enter input:hover {
    border: 2px solid #8686ff;
    border-right: none;
}
#enter input~span {
    display: block;
    width: 64px;
    height: 60.8px;
    background-color: #e1e1ff;
    border-radius: 0 10px 10px 0;
    padding: 8px;
    cursor: pointer;
    transition: 300ms linear background-color, 250ms linear box-shadow;
    text-align: center;
    font-size: 3.5rem;
    user-select: none;
    color: #8686ff;
}
#enter input~span:hover {
    box-shadow: inset 0 0 0 4px #8686ff;
    color: #5361c1;
}
#web {
    height: 100vh;
    overflow: hidden;
}
#web>webview, #web>iframe {
    width: 100vw;
    height: 100vh;
}

#tool {
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    height: 0.5em;
    width: 5em;
    z-index: 999;
    background: rgba(26,21,43, 0.8);
    box-shadow: inset 0 0 0 1px rgba(26,21,43, 1), 1px 1px 0.1em rgba(26,21,43, 0.8);
    border-radius: 10px;
    cursor: pointer;
    transition: 200ms linear width, 50ms linear height;
    padding: 0 4px;
}

#tool>div {
    display: none;
    opacity: 0;
    transition: 300ms 10ms  ease-in opacity;
}
#tool .iconfont, #right, #left {
    display: none;
}
#tool:hover .iconfont,  #right, #left {
    display: flex;
}
#tool:hover {
    height: 2em;
    width: 20em;
    display: flex;
    justify-content: space-between;
}
#tool>#left,#tool>#right {
    width: 8em;
    display: flex;
}
#tool>#right {
    justify-content: right;
}
#tool div{
    color: #ffffff;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 4px;
    user-select: none;
}
#tool .iconfont {
    font-weight: 700;
}
#tool .iconfont:hover {
    color: #64b5f6;
}
#tool:hover >div {
    display: block;
    opacity: 1;
}
#alwaysTop[data-status="true"] {
    color: #e95949;
}
#cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    -webkit-app-region: drag;
    display: none;
}
#settingBox {
    position: absolute;
    top: 15px;
    left: 25px;
    display: flex;
    align-items: center;
}
.form-item {
    display: flex;
    align-items: center;
    padding-right: 5px;
}
.form-item label {
    padding-right: 5px;
}
.pxmu-toast-pc {
    top: 10px !important;
}
.ui-select-button {
    height: auto;
}
.ui-select-datalist-li {
    padding: 8px;
    line-height: 14px;
}
.ui-select-datalist {
    max-height: 145px;
}
.ui-dialog-footer {
    margin-bottom: 10px;
}
